<template>
	<div>
		<u-navbar>
			<u-search placeholder="请输入档口名称或档口号" @search="search" @clear="search" @custom="search" v-model="keyword">
			</u-search>
		</u-navbar>
		<view class="tab-list" :style="{top:topValue}">
			<u-tabs :list="tabList" :current="current" @change="changeTab" active-color="#f12f16"></u-tabs>
		</view>
		<div style="padding-top: 60px;width: 100vw;display: flex;justify-content: center;" v-if="loading">
			<u-loading mode="flower" :size="40"></u-loading>
		</div>
		<div class="wrapper" v-if="storeList.length!=0" style="padding-top: 44px;">
			<view class="store-item" v-for="(item,index) in storeList" :key="index">
				<div style="display: flex;align-items: center;">
					<div>
						<u-image shape="circle" width="100" height="100" :src="item.storeLogo">
						</u-image>
					</div>
					<div class="store-msg">
						<view style="display: flex;align-items: center;">
							<div class="store-name">{{item.storeName}}</div>
							<image src="https://www.zhebao198.com/static/img/nb.2a01daf7.gif"
								style="width: 35rpx;height: 30rpx;margin-top: 1rpx;margin-right: 6rpx;"
								v-for="(item, index) in item.hgNum" :key="index"></image>
							<image src="https://www.zhebao198.com/static/img/na.47d05cb3.gif"
								style="width: 30rpx;height: 27rpx;margin-top: 5rpx;margin-right: 6rpx;"
								v-for="(item, index) in item.zsNum" :key="index"></image>
							<div
								style="margin-left: 15rpx;padding: 0px 15rpx;color: #fff;background: rgb(101, 219, 121);line-height: 35rpx;font-size: 25rpx;border-radius: 6rpx;">
								{{ item.year ? item.year : 2 }}年
							</div>
							<div class="store-but" @click="handleClickStore(item)">进店</div>
						</view>
						<div class="goods-num">
							<text style="color: #f12f16;margin-right: 15rpx;">{{item.pageDataName}}</text>
							<text>{{item.marketAreaName}} {{item.ddCode}}</text>
							<text style="margin-left: 15rpx;">在售:{{item.goodsNum}}款</text>
						</div>
					</div>
				</div>
				<view class="store-img">
					<view style="margin-right: 15rpx;position: relative;" v-for="goods in item.goodsModelList"
						:key="goods.id" @click="navigateToDetailPage(goods)">
						<u-image shape="square" width="210" height="210" border-radius="10rpx" :src="goods.thumbnail">
						</u-image>
						<div class="float">
							<span style="margin-top: 3px;">￥{{ goods.price }}</span>
						</div>
					</view>

				</view>
			</view>
		</div>
		<view style="margin-top: 200rpx;">
			<u-empty style="margin-top:20%;" text="暂无档口信息" v-if="isEmpty"></u-empty>
		</view>

	</div>
</template>

<script>
	import {
		getStoreList,
		getAllTemplate
	} from "@/api/store";
	export default {
		data() {
			return {
				loading: false,
				keyword: "",
				params: {
					pageNumber: 1,
					pageSize: 10,
					name: "",
					marketId: '1838074906714157058',
					pageDataId: "",
					gold: "",
				},
				storeList: [], // 店铺列表
				tabList: [],
				current: 0,
				isEmpty: false,
				topValue: 0,
			};
		},
		onLoad(opt) {
			console.log(123, opt);
			if (opt.gold) {
				this.params.gold = 1
			} else {
				this.params.gold = ''
			}
			if (opt.keword) {
				this.keyword = opt.keword
			}
		},
		onReachBottom() {
			this.params.pageNumber++;
			this.init();
		},

		mounted() {

			this.topValue = this.$u.sys().statusBarHeight + 44 + 'px'
			console.log(234, this.$u.sys().statusBarHeight, this.topValue)
			this.getTemplet()
			this.init();
		},
		methods: {
			changeTab(index) {
				this.current = index;
				this.params.pageDataId = this.tabList[index].id
				this.storeList = [];
				this.init()
			},
			async getTemplet() {
				const res = await getAllTemplate()
				if (res.data.message === 'success') {
					const arr = res.data.result
					const arrb = []
					arr.forEach(item => {
						item.list.forEach(row => {
							if (row.type == 1 && row.pageShow == 'OPEN')
								arrb.unshift(row);
						});
					});

					this.tabList = [{
						name: '全部',
						id: ''
					}, ...arrb]
					console.log(this.tabList);
				}
			},
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/goods?goodsId=${item.id}`,
				});
			},
			handleClickStore(val) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${val.id}`
				});
			},
			search() {
				this.storeList = [];
				this.init();
			},

			async init(code) {
				this.loading = true
				this.isEmpty = false
				if (code) {
					this.params.ddCode = this.keyword
					this.params.name = ''
				} else {
					this.params.name = this.keyword
					this.params.ddCode = ''
				}
				let res = await getStoreList(this.params);
				if (res.data.success) {
					let data = res.data.result;
					const arr = data.records
					const arra = [];
					if (!arr.length && this.keyword) {
						this.init('code')
						return
					}
					arr.forEach(item => {
						if (item.diamond < 5) {
							item.zsNum = item.diamond;
						} else {
							item.zsNum = Math.floor(item.diamond % 5);
							item.hgNum = Math.floor(item.diamond / 5);
						}
						if (item.goodsModelList.length) {
							arra.push(item);
						}
					});
					this.storeList.push(...arra);
					this.loading = false
					this.isEmpty = !this.storeList.length
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tab-list {
		position: fixed;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 999;
	}

	.wrapper {
		padding: 0 16rpx;
		width: 100vw;
		min-height: 100vh;
		background: #F3F5F9;
	}

	.store-item {
		// display: flex;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx 0;
		padding: 24rpx;
	}

	.store-img {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		width: 100%;
		overflow: hidden;
	}

	.float {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 5rpx;
		border-radius: 0 10rpx 0 0;
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 35rpx;
		box-sizing: border-box;
	}

	.store-msg {
		margin-left: 20rpx;
		flex: 1;
	}

	.store-name {
		font-weight: bold;
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.store-but {
		border: 1px solid #f12f16;
		color: #f12f16;
		font-size: 25rpx;
		line-height: 40rpx;
		width: 100rpx;
		border-radius: 20rpx;
		margin-left: auto;
		text-align: center;
	}

	.goods-num,
	.store-collection {
		color: #999;
		font-size: 24rpx;
		line-height: 1.5;
		margin-top: 6rpx;
	}

	.store-goods {
		margin: 20rpx 0;
	}

	.store-goods-item {
		flex: 1;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		margin: 0 5rpx;
	}

	.wes {
		margin: 10rpx 0;
		width: 100%;
	}

	.store-score {
		color: $light-color;
		font-size: 24rpx;
		font-weight: bold;
	}

	.line {
		margin: 0 6rpx;
		color: #999;
	}

	.store-distance {
		justify-content: space-between;
	}

	.price {
		margin-top: 10rpx;
		color: $main-color;
	}

	.goods-price-bigshow {
		font-size: 34rpx;
		font-weight: bold;
	}
</style>